<template>
	<div id="selectDiv" :style="'width: ' + width + 'px'">
		<div class="optionsDiv">
			<div class="optionName">学历要求：</div>
			<div class="optionTitleDiv">
				<div @click="selectTag(tag, index)"
					:class="tagIndex == index ? 'optionDiv optionDivSelected' : 'optionDiv'"
					v-for="(tag, index) in tags" :key="tag.dictValue">
					{{ tag.dictLabel }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import config from '@/utils/config.js'
	import { request } from '@/utils/request.js'

	export default {
		name: "talentSelectBox",
		data() {
			return {
				tags: [
					// { 
					// 	dictLabel: '全部' ,
					// 	dictValue: ""
					// },
					{
						dictLabel: "不限",
						dictValue: "0",
						dictType: "worker_education"
					},
					{
						dictLabel: "初中",
						dictValue: "1",
						dictType: "worker_education"
					},
					{
						dictLabel: "高中",
						dictValue: "2",
						dictType: "worker_education"
					},
					{
						dictLabel: "大专",
						dictValue: "3",
						dictType: "worker_education"
					},
					{
						dictLabel: "本科",
						dictValue: "4",
						dictType: "worker_education"
					},
					{
						dictLabel: "研究生",
						dictValue: "5",
						dictType: "worker_education"
					},
					{
						dictLabel: "博士",
						dictValue: "6",
						dictType: "worker_education"
					},
					{
						dictLabel: "海归",
						dictValue: "7",
						dictType: "worker_education"
					}
				],
				tagIndex: 0,
				typeIndex: 0,
			}
		},
		props: {
			width: {
				type: Number,
				default: 1000
			}
		},
		methods: {
			/**
			 * 获取学历列表
			 */
			async getTagsAndTypes() {
				// this.tags = [{ dictLabel: '全部', dictValue: '' }];
				this.tagIndex = 0;
				const { code, msg, data } = await request(this, config.api.educationSelectList);
				if (code != '200') return this.$message.warning(msg);
				// this.tags = this.tags.concat(data.worker_education);
				this.tags = data.worker_education;
			},
			/**
			 * 选择学历事件
			 * @param tag 被选中的学历对象
			 * @param index 被选中的学历下标
			 */
			selectTag(tag, index) {
				this.tagIndex = index;
				this.changeOption();
			},
			/**
			 * 改变筛选选项
			 */
			changeOption: function () {
				let data = {
					tag: this.tags[this.tagIndex]
				}
				this.$emit('changeOption', data);
			}
		},
		mounted() {
			this.getTagsAndTypes();
		}
	}
</script>

<style scoped>
	#selectDiv {
		border: 1px solid #e1e1e1;
		margin: 0 auto;
	}

	#selectDiv .optionsDiv {
		text-align: left;
		padding: 10px 20px;
		font-size: 14px;
		color: #676767;
		display: flex;
		justify-content: left;
	}

	#selectDiv .optionsDiv .optionName {
		width: 80px;
		padding: 5px 0;
		white-space: nowrap;
	}

	#selectDiv .optionsDiv .optionTitleDiv {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
	}

	#selectDiv .optionsDiv .optionTitleDiv .optionDiv {
		padding: 4px 10px;
		margin: 2px 10px;
		border-radius: 2px;
	}

	#selectDiv .optionsDiv .optionTitleDiv .optionDiv:hover {
		cursor: pointer;
		transition: all 0.2s ease 0s;
	}

	#selectDiv .optionsDiv .optionTitleDiv .optionDivSelected {
		color: #FFFFFF;
		background-color: #ce0000;
	}
</style>